<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 200px;height: 200px;background: pink}
    </style>
</head>
<body style="height:2000px">
    <h3>123123</h3>
    <div class="box"></div>
</body>
<script>
    var obox = document.querySelector(".box")

    obox.onmousedown = function(a){
        var e = a || window.event;
        // console.log(e);
        // 事件类型
        // console.log(e.type);
        // 事件目k
        // console.log(e.target);
        // console.log(e.srcElement);
        // 坐标类
        // 相对于事件目标的坐标位置
        // console.log(e.offsetX, e.offsetY);
        // 相对于浏览器的可视区域
        // console.log(e.clientX, e.clientY);
        // 相对于页面的坐标位置（包括滚走了的位置）
        // console.log(e.pageX, e.pageY)

        // 获取按下的是哪个鼠标键（兼容）
        // console.log(e.buttons);
        // console.log(e.button);

        // 相对于显示器的坐标
        // console.log(e.screenX, e.screenY);
    }

    // 键盘事件只能加给有焦点的元素

    // document.onkeydown = function(){
    //     console.log(2)
    // }
</script>
</html>